<template>
  <div class="ListsOfCities">
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.go(-1)" />
    <van-index-bar :index-list="indexList">
      <!-- <van-index-anchor index="1">当前城市</van-index-anchor>
      <van-cell title="广州" /> -->

      <van-index-anchor index="热">热门城市</van-index-anchor>
      <!-- <van-cell :title="item.label" v-for="item in list" :key="item.index" /> -->
      <van-cell v-for="item in list" :key="item.pinyin">
        {{ item.label }}</van-cell
      >
      <!-- <van-cell title="上海" />
      <van-cell title="深圳" /> -->

      <!-- <van-index-anchor index="A">A</van-index-anchor>
      <van-cell title="暂无城市" /> -->
    </van-index-bar>
  </div>
</template>

<script>
import { listsofcities } from '@/api/user'
export default {
  name: 'ListsOfCities',
  data () {
    return {
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      level: null,
      list: []
    }
  },
  async created () {
    const data = await listsofcities()
    console.log(data)
    this.list = data.body
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: #21b97a;
  z-index: 9;
}
</style>
